
<template>
	<view class="main">
		<Navbar bgc="#fff" color="#333" v-show="true">我的</Navbar>
		<view class="user-info">
			<view class="user-img">
				<image :src="userInfo.img?userInfo.img:'../../static/Screenshot_2020_0330_092211.png'" mode=""></image>
			</view>
			<view class="user-info-text">
				<text class="user-name">{{userInfo.nickname}}</text></br>
				<text class="user-id">ID:{{userInfo.id}}</text>
			</view>
			<view class="QR-code" v-if="userInfo.type==2" @click.stop="goShare()">
				<image class="QR-code-img" src="../../static/logo.png" mode=""></image><image class="QR-code-arrow" src="../../static/logo.png" mode=""></image>
			</view>
		</view>
		<view class="InviteTeam" v-if="userInfo.type==2"></view>
		<view class="menu">
			<view class="financialReport" v-if="userInfo.type==2" @click.stop="goReport()">
				我的财报<image class="financialReport-arrow" src="../../static/logo.png" mode=""></image>
			</view>
			<view class="financialDetail" v-if="userInfo.type==2" @click.stop="goReport()">
				<view>
					<text>{{userInfo.rake_back.storeBack}}</text></br>
					<text>本月店铺返佣</text>
				</view>
				<view>
					<text>{{userInfo.rake_back.teamBack}}</text></br>
					<text>本月团队返佣</text>
				</view>
			</view>
			<view class="item-menu">
				<view class="menu-item" v-if="userInfo.type==2" @click.stop="goWallet()">
					<view>
						<image src="../../static/Screenshot_2020_0330_092211.png" mode=""></image>
					    <text>我的钱包</text>
					</view>
				</view>
				<view class="menu-item" v-if="userInfo.type==2" @click.stop="goMyTeam()">
					<view style="background: #EFF8F5;">
						<image src="../../static/Screenshot_2020_0330_092211.png" mode=""></image>
					    <text>我的团队</text>
					</view>
				</view>
				<view class="menu-item" v-if="userInfo.type==2" @click="goRebate()">
					<view style="background: #F5F5FF;" >
						<image src="../../static/Screenshot_2020_0330_092211.png" mode=""></image>
					    <text>返佣明细</text>
					</view>
				</view>
				<view class="menu-item">
					<view style="background: #FDF4F7;" >
						<image src="../../static/Screenshot_2020_0330_092211.png" mode=""></image>
					    <text>收货地址</text>
					</view>
				</view>
				<view class="menu-item" @click.stop="connect()">
					<view style="background: #E8FBFF;">
						<image src="../../static/Screenshot_2020_0330_092211.png" mode=""></image>
					    <text>联系客服</text>
					</view>
				</view>
				<view class="menu-item" @click.stop="aboutUs()">
					<view style="background: #FFFAE0;">
						<image src="../../static/Screenshot_2020_0330_092211.png" mode=""></image>
					    <text>关于我们</text>
					</view>
				</view>
			</view>
		</view>
		<dialogview v-show="dialogFlag" @cancel="cancel" @confirm="confirm" :param="dialogView"></dialogview>
	</view>
</template>

<script>
	import Navbar from "../../components/nav-bar.vue"
	import dialogview from "../../components/dialogView.vue"
	export default {
		components:{
			dialogview,
			Navbar
		},
		data() {
			return {
				
				userInfo:{},
				dialogView:{
					style:0,  // 弹出框的样式： 0 1 2
					title:'提示',//弹出层的标题
					content:'确定要这样做吗确定要这样做吗确定要这样做吗确定要这样做吗？',//弹出层的内容
					cancelText:'取消',//取消按钮的文本
					confirmText:'确认',//确认按钮的文本
					data:{}
				},
				dialogFlag:false,
			}
		},
		methods: {
			goWallet:function(){//我的钱包
				uni.navigateTo({
					url:"../wallet/wallet"
				})
			},
			goMyTeam:function(){//我的团队
				uni.navigateTo({
					url:"../rank/rank"
				})
			},
			goReport:function(){//我的财报
				uni.navigateTo({
					url:"../myReport/myReport"
				})
			},
			goRebate:function(){//返佣明细
				uni.navigateTo({
					url:"../rebateList/rebateList"
				})
			},
			connect:function(){//联系客服
				this.dialogView={
					style:0,  // 弹出框的样式： 0 1 2
					title:'提示',//弹出层的标题
					content:'客服电话'+this.userInfo.connect_phone,//弹出层的内容
					cancelText:'取消',//取消按钮的文本
					confirmText:'拨打',//确认按钮的文本
					data:{}
				}
				this.dialogFlag = true
			},
			aboutUs:function(){//关于我们
				uni.navigateTo({
					url:"../aboutUs/aboutUs"
				})
			},
			goShare:function(){
				uni.navigateTo({
					url:"../poster/poster?id="+this.userInfo.id
				})
			},
			cancel:function(){
				this.dialogFlag = false
			},
			confirm:function(){
				uni.makePhoneCall({
					phoneNumber: String(this.userInfo.connect_phone)
				})
				this.dialogFlag = false
			}
		},
		onLoad:function(){
			let _this = this
			let param = {
				"token":this.token,
			}
			this.ajaxJson('userInfo',param,function(data){
				console.log(data);
				_this.userInfo = data
			})
		}
	}
</script>

<style scoped>
   *{
   	margin: 0;
   	padding: 0;
   	list-style: none;
   	box-sizing: border-box;
   	font-size: 0.75rem;
   }
   .user-info{
	 height: 4rem;
	 margin-top: 4rem;
	 padding: 0.25rem 4%;
	 position: relative;
   }
   .user-img{
	   width: 3.5rem;
	   height: 3.5rem;
	   background: #999;
	   overflow: hidden;
	   border-radius: 50%;
	   display: inline-block;
	   vertical-align: top;
   }
   .user-img image{
	   width: 100%;
	   height: 100%;
   }
   .user-info-text{
	   display: inline-block;
	   height: 3.5rem;
	   padding: 0.25rem 1rem;
   }
   .user-name{
	   font-size:1rem;
	   font-weight: bold;  
   }
   .user-id{
	   margin-top: 0.5rem;
	   display: inline-block;
	   color: #DADAE3;
   }
   .QR-code{
	   position: absolute;
	   transform: translate(0,-50%);
	   top:50%;
	   right: 4%;
   }
   .QR-code-img{
	   width: 1.2rem;
	   height: 1.2rem;
   }
   .QR-code-arrow,.financialReport-arrow{
	   width: 0.6rem;
	   height: 1.2rem;
	   margin-left: 0.25rem;
   }
   .financialReport-arrow{
	   position: relative;
	   top: 0.2rem;
   }
   .InviteTeam{
	   background: #000;
	   margin: 1rem 7.5% 0;
	   height: 2rem;
	   border-radius: 10px 10px 0 0;
	   overflow: hidden;
   }
   .menu{
	   min-height: 20rem;
	   box-shadow: 0 0 10px 1px #eee;
	   margin: 0 4%;
	   border-radius: 5px;
	   padding:1rem 4%;
	   background-color: #FFFFFF;
   }
   .financialReport{
	   font-size: 0.95rem;
	   font-weight: bold;
   }
   .financialDetail{
	   box-shadow: 0 0 10px 1px #eee;
	   height: 4.5rem;
	   margin-top: 1rem;
	   border-radius: 5px;
   }
   .financialDetail view{
	   text-align: center;
	   height: 100%;
	   width: 50%;
	   float: left;
	   line-height: 2rem;
	   padding: 0.25rem 0;
   }
   .financialDetail view text:first-child{
	   font-weight: bold;
   }
   .financialDetail view text:nth-child(3){
   	   color: #DADAE3;
   }
   .item-menu{
	   margin-top: 1rem;
   }
   .menu-item{
	   width: 33.33333333%;
	   height: 5rem;
	   
	   float: left;
	   padding: 2.5%;
   }
   .menu-item image{
	   width: 50%;
	   height: 50%;
	   margin: 10% 25%;
   }
   .menu-item view{
	   width: 100%;
	   height: 100%;
	   background-color: #FEEFEA;
	   border-radius: 5px;
   }
   .menu-item text{
	   text-align: center;
	   display: inline-block;
	   width: 100%;
	   white-space: nowrap;
	   position: relative;
	   top: -0.25rem;
   }
</style>